<template>
<div>
  <vue-html5-editor :content="content" class="editor"></vue-html5-editor>
  <!-- <quill-editor class="editor" v-model="content"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)">
  </quill-editor> -->
  </div>
</template>

<script>
export default {
  props: ['html'],
  mounted() {
    this.setContent(this.html)
  },
  watch: {
    html(val) {
      this.setContent(val)
    },
    content(val) {
      this.$emit('update:html', this.content)
    }
  },
  data() {
    return {
      content: '',
      editorOption: {
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            [
              {
                header: [1, 2, 3, 4, 5, 6, false]
              }
            ],
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            ['blockquote', 'code-block'],
            [
              {
                list: 'ordered'
              },
              {
                list: 'bullet'
              }
            ],
            [
              {
                script: 'sub'
              },
              {
                script: 'super'
              }
            ],

            [
              {
                color: []
              },
              {
                background: []
              }
            ], // dropdown with defaults from theme
            [
              {
                font: ['微软雅黑', 'Arial', '宋体', '黑体']
              }
            ],
            [
              {
                align: []
              }
            ],

            ['link', 'image']
          ],
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          },
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          }
        }
      }
    }
  },
  methods: {
    onEditorBlur(editor) {
      // console.log("blur", this.content);
    },
    onEditorFocus(editor) {
      // console.log('editor focus!', editor)
    },
    onEditorReady(editor) {
      // console.log('editor ready!', editor)
    },
    setContent(content) {
      if (this.content === content) return
      this.content = content
    }
  }
}
</script>

<style>
.editor.quill-editor .ql-container {
  height: 400px;
  padding-bottom: 1rem;
  background: white;
}
</style>
